<template>
    <div>
    <h3>会员增加页面</h3>
    <table class="table table-borderd">
      <tbody>
        <tr>
          <td align="right">帐号</td>
          <td><input type="text" v-model="queryInfo.Name" /></td>
        </tr>
        <tr>
          <td align="right">密码</td>
          <td><input type="password" v-model="queryInfo.Pwd" /></td>
        </tr>
        <tr>
          <td align="right">确认密码</td>
          <td><input type="password" v-model="PwdOk" /></td>
        </tr>
        <tr>
          <td align="right">手机号</td>
          <td>
            <input type="text" v-model="queryInfo.Phone" maxlength="11" />
          </td>
        </tr>
        <tr>
          <td align="right">身份证</td>
          <td><input type="text" v-model="queryInfo.Card" maxlength="18" /></td>
        </tr>
        <tr>
          <td align="right">生日</td>
          <td><input type="date" v-model="queryInfo.Birthday" /></td>
        </tr>
        <tr>
          <td align="right">性别</td>
          <td>
            <input
              type="radio"
              name="sex"
              v-model="queryInfo.Sex"
              :value="1"
            />男<input
              type="radio"
              name="sex"
              v-model="queryInfo.Sex"
              :value="0"
            />女
          </td>
        </tr>
        <tr>
          <td align="right">积分</td>
          <td><input type="text" v-model="queryInfo.Points" /></td>
        </tr>
        <tr>
          <td align="right">余额</td>
          <td><input type="text" v-model="queryInfo.Money" /></td>
        </tr>
        <tr>
          <td align="right">会员等级</td>
          <td>
            <select v-model="queryInfo.LevelId">
              <option value="">请选择</option>
              <option
                :value="item.Id"
                v-for="item in memberLevelList"
                :key="item.Id"
              >
                {{ item.LevelName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td><input type="button" value="增加" @click="ok" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
  import {ref,reactive,onMounted} from 'vue';
  import axios from 'axios';
  import{useRouter} from 'vue-router'
  const router=useRouter();
  let queryInfo=reactive({
    Name: '',
    Phone: '',
    Card: '',
    Birthday: '',
    Sex: 1,
    Pwd: '',
    Money: '',
    Points: '',
    LevelId: '',
  })
  let PwdOk=ref('');
  let memberLevelList:any=ref([]);
  onMounted(()=>{
    getMemnerList();
  })
  const getMemnerList=()=>{
    axios({
        url: '/api/Members/MemberLevelsList',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        memberLevelList.value=res.data;
        console.log(memberLevelList);
    })
    .catch((err)=>{
        console.log(err);
    });
  }
  const ok = () => {
  //1.非空+有效验证
  if (queryInfo.Name == '') {
    alert('帐号不能为空');
    return;
  }
  if (queryInfo.Pwd == '') {
    alert('密码不能为空');
    return;
  }
  if (PwdOk.value == '') {
    alert('确认密码不能为空');
    return;
  }

  if (queryInfo.Pwd != PwdOk.value) {
    alert('密码和确认密码不一致');
    return;
  }
  if (queryInfo.Phone == '') {
    alert('手机号不能为空');
    return;
  }
  //是否是正确的手机号
  let reg = /^1[3-9]\d{9}$/;
  if (reg.test(queryInfo.Phone) == false) {
    alert('手机号不合法');
    return;
  }
  if (queryInfo.Card == '') {
    alert('身份证号码不能为空');
    return;
  }

  let reg1 = /^\d{17}[0-9Xx]$/;
  if (reg1.test(queryInfo.Card) == false) {
    alert('身份证不合法');
    return;
  }

  if (queryInfo.Birthday == '') {
    alert('生日不能为空');
    return;
  }

  if (queryInfo.Points == '') {
    alert('积分不能为空');
    return;
  }
  //isNaN判断一个字符串是不是数字 ，如果是数字返回是值false   如果不是true
  //Number是数据类型转换 将字符串转成数值类型
  if (isNaN(Number(queryInfo.Points)) == true) {
    alert('积分只能数字');
    return;
  }

  if (queryInfo.Money == '') {
    alert('余额不能为空');
    return;
  }

  if (isNaN(Number(queryInfo.Money)) == true) {
    alert('余额只能是数字');
    return;
  }

  if (queryInfo.LevelId == '') {
    alert('会员等级必选');
    return;
  }

  //2.发送网络请求将数据填加到数据库

  axios({
    url: '/api/Members/MemberAdd',
    method: 'post',
    data: queryInfo,
  })
    .then((res) => {
      //发送网络请求成功时调用的函数 相当于success
      console.log(res);
      if (res.data == -1) {
        alert('手机号重复');
        return;
      }
      if (res.data == -2) {
        alert('身份证重复');
        return;
      }
      alert('添加成功');
      //成功跳转到显示列表页
      router.push('/memberList');
    })
    .catch((err) => {
      //发送网络请求失败时调用的函数 相当于error
      console.log(err);
    });
};
</script>

<style scoped></style>
